<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('库存明细')"/>
	<style>
		[v-cloak] {
			display: none;
		}
		.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 200px!important;
		}
		.el-input__icon {
			line-height: 0!important;
		}
		.tag {
			display: inline-block;
			padding: 0 5px;
			line-height: 22px;
			color: #FFFFFF;
			border-radius: 3px;
			cursor: pointer;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								单号：<input type="text" id="stateNo" name="stateNo"/>
							</li>
							<li>
								状态：
								<select name="state">
									<option value="">全部</option>
									<option value="1">未导出</option>
									<option value="2">已导出</option>
								</select>
							</li>
							<li>
								<label>创建时间：</label>
								<el-date-picker
									name="startTime"
									v-model="timeA"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="datetime"
									@change="compare"
									placeholder="开始时间">
								</el-date-picker>
								<span>-</span>
								<el-date-picker
									name="endTime"
									v-model="timeB"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="datetime"
									@change="compare"
									placeholder="结束时间">
								</el-date-picker>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
<!--								<a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i class="fa fa-edit"></i>&nbsp;更多</a>-->
							</li>
						</ul>
					</div>
				</form>
			</div>
			<el-dialog title="搜索条件" width="200px" :visible.sync="showMore">
				<el-row>
					<el-col :span="24">
						<el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						<el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
							<el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item" :key="item" v-cloak>{{item}}</el-checkbox>
						</el-checkbox-group>
					</el-col>
				</el-row>
			</el-dialog>
	        <div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-info" @click="partExcel()">
					<i class="fa fa-download"></i> 部分导出
				</a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
	<script th:src="@{/wms/js/moreSearch.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "in/boxItem";
		function bit() {
			var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
			if(rows==''){
				$.modal.alert("请选择数据")
			}else{
				$.modal.openTab("打印", "http://localhost:8000/electricBox/print?ids="+rows);
			}
		}

		const searchOptions = ['单号', '创建时间'];

		var app = new Vue({
			el: '.container-div',
			data: {
				showMore: false,
				checkAll: false,
				checkedSearch: ['单号', '创建时间'],
				searches: searchOptions,
				isIndeterminate: true,
				timeA: '',
				timeB: ''
			},
			methods: {
				partExcel(){
					var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
					if(rows.length == 0){
						$.modal.alertWarning("请至少选择一条记录");
						return;
					}else{
						$.modal.confirm("确认要导出选中的" + rows.length + "条数据吗?", function(){
							var url = prefix + "/partExcelState";
							var data = {"ids": rows.join()};
							$.post(url, data, function(result){
								if(result.code == web_status.SUCCESS){
									window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
								}else if(result.code == web_status.WARNING){
									$.modal.alertWarning(result.msg);
								}else{
									$.modal.alertError(result.msg);
								}
								$.modal.closeLoading();
							});
						});
					}
				},
				compare: function(){
					if(this.timeA != '' && this.timeA != null){
						if(this.timeB != '' && this.timeB != null){
							var a = new Date(this.timeA);
							var b = new Date(this.timeB);
							if(a > b){
								$.modal.alertError("结束时间需大于开始时间，请重新选择！！");
								this.timeA = '';
								this.timeB = '';
							}
						}else{
							this.timeB = '';
						}
					}else{
						this.timeA = '';
						if(this.timeB == null){
							this.timeB = '';
						}
					}
				}
			}
		})

        $(function () {
            var options = {
                url: prefix + "/findList",
				exportUrl: prefix + "/export",
                modalName: "质量转换",
                columns: [
					{
						checkbox: true
					},
					{
						field: 'stateDetailId',
						title: '序号',
						align: 'center',
						visible: false
					},
					{
						field: 'stateNo',
						title: '质量转换单号',
						align: 'center'
					},
					{
						field: 'itemCode',
						title: '物料编码',
						align: 'center'
					},
					{
						field: 'itemName',
						title: '物料描述',
						align: 'center'
					},
					{
						field: 'sort',
						title: '物料类型',
						align: 'center',
						formatter: function(value, row, index){
							var actions = [];
							if(value == 1){
								actions.push("<span>钢材</span>");
							}else if(value == 2){
								actions.push("<span>铜材</span>");
							}
							return actions.join('');
						}
					},
					{
						field: 'billInState',
						title: '新质量',
						align: 'center',
						formatter: function(value, item, index){
							var actions = [];
							if(value == 1){
								actions.push("<span class='tag' style='background-color: #fcb529'>合格</span>");
							} else if (value == 2) {
								actions.push("<span class='tag' style='background-color: #f8ac59'>待检</span>");
							}else if (value == 3) {
								actions.push("<span class='tag' style='background-color: #999999'>不合格</span>");
							}else if (value == 4) {
								actions.push("<span class='tag' style='background-color: red'>异常</span>");
							}
							else if (value == 5) {
								actions.push("<span class='tag' style='background-color: red'>试作品</span>");
							}
							return actions.join('');
						}
					},
					{
						field: 'oldBillInState',
						title: '旧质量',
						align: 'center',
						formatter: function(value, item, index){
							var actions = [];
							if(value == 1){
								actions.push("<span class='tag' style='background-color: #fcb529'>合格</span>");
							} else if (value == 2) {
								actions.push("<span class='tag' style='background-color: #f8ac59'>待检</span>");
							}else if (value == 3) {
								actions.push("<span class='tag' style='background-color: #999999'>不合格</span>");
							}else if (value == 4) {
								actions.push("<span class='tag' style='background-color: red'>异常</span>");
							}
							else if (value == 5) {
								actions.push("<span class='tag' style='background-color: red'>试作品</span>");
							}
							return actions.join('');
						}
					},
					{
					    field: 'state',
					    title: '状态',
					    align: 'center',
					    formatter: function(value, item, index){
					        var actions = [];
					        if(value == 1){
					            actions.push("<span class='tag' style='background-color: #fcb529'>未导出</span>");
					        } else if (value == 2) {
					            actions.push("<span class='tag' style='background-color: #f8ac59'>已导出</span>");
					        }
					        return actions.join('');
					    }
					},
					{
						field: 'createName',
						title: '创建人',
						align: 'center'
					},
					{
						field: 'createTime',
						title: '创建时间',
						align: 'center',
						formatter: function(value, row, index){
							if(value == null){
								return '-';
							}else{
								return value.slice(0, 19);
							}
						}
					},
					// {
					// 	title: '操作',
					// 	align: 'center',
					// 	events: {
					// 		'click .detail': function(e, value, rowData, index){
					// 			var id = rowData.stateId;
					// 			// var id = rowData.materialId;
					// 			var _url = '/IngotIocus';
					// 			localStorage.setItem(_url, id.toString());
					// 			$.modal.openFull("查看", _url);
					// 		}
					// 	},
					// 	formatter: function(value, row, index){
					// 		var actions = [];
					// 		actions.push("<span class='detail tag' style='background-color: #1ab394'>查看</span>");
					// 		return actions.join('');
					// 	}
					// }
		        ]
            };
            $.table.init(options);
        });

		function open(title, url, width, height, callback){
			if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
				width = 'auto';
				height = 'auto';
			}
			if($.common.isEmpty(title)){
				title = false;
			}
			if($.common.isEmpty(url)){
				url = "/404.html";
			}
			if($.common.isEmpty(width)){
				width = 800;
			}
			if($.common.isEmpty(height)){
				height = ($(window).height() - 250);
			}
			if($.common.isEmpty(callback)){
				callback = function(index, layero){
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler();
				}
			}
			layer.open({
				type: 2,
				area: [width + 'px', height + 'px'],
				fix: false,
				maxmin: true,
				shade: 0.3,
				title: title,
				content: url,
				btn: ['关闭'],
				shadeClose: false,
				yes: callback,
				cancel: callback
			});
		}

		function close(){
			localStorage.removeItem('/IngotIocus');
			$.modal.closeAll();
		}
    </script>
</body>
</html>
